<template>
  <div @click="newsDetail(i)" :class="{hotnews:i.top==1}">
    <p class="news-title">
      <span class="icon-ding">TOP</span>
      <span>{{i.title}}</span>
    </p>
    <p class="news-control clearfix">
      <span class="news-ly dh fl">{{i.copyfrom}}</span>
       <van-icon color="rgba(136,137,141,1)" class="icon-ydl fl" name="eye-o" />
      <span class="news-ydl fl">
       
        {{i.hits}}
      </span>
      <span class="news-time fl">{{i.addtime}}</span>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
import dings from "../../assets/img/icon-ding.png";

export default {
  props: ["i"],
  data() {
    return {
      dings
    };
  },
  methods: {
    newsDetail(i) {
      if (i.title == this.$route.query.title) {
        this.$toast("当前新闻");
        return false;
      }
      this.$router.push({ name: "newsDetails", query: i });
    }
  }
};
</script>

<style scoped lang="less">
.news-title {
  font-size: 0.3rem;
  line-height: 0.4rem;
  max-height: 0.8rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #002b83;
  .icon-ding {
   
    background:rgba(216, 45, 39, 1);
    color: #ffffff; 
    padding: 0.05rem .15rem;
    border-radius: .05rem;
    font-size: .2rem;
    display: none;
  }
}
.hotnews {
  color: rgba(216, 45, 39, 1);
  .news-title {
    color: rgba(216, 45, 39, 1);
  }
  .icon-ding {
    display: inline;
  }
}
.news-control {
  font-size: 0.22rem;
  line-height: .36rem;
  color: rgba(170, 170, 170, 1);
  .news-ly {
    color: #ffffff;
    background: rgba(56, 184, 250, 1);
    padding: 0rem 0.1rem;
    max-width: 50%;
  }
  .news-ydl {
    padding-left: 0.05rem;
    font-size: 0.24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 .2rem 0 0;
  }
  .icon-ydl {
    margin-left: 0.1rem;
    line-height: inherit;
  }
}
</style>
